<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="gandli" />
	
	
	
	<title>在 HTML 中快捷输入标签 ｜ 陈学新คิดถึง</title>
	
    
    
    <meta name="description" content="在 HTML 中快捷输入标签" />
    

    
    
    <meta name="keywords" content="HTML" />
    

	
    
    <link rel="shortcut icon" href="https://chenxuexin.com/images/favicon.ico" />

    <link rel="stylesheet" type="text/css" media="screen" href="https://chenxuexin.com/css/normalize.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://chenxuexin.com/css/zozo.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://chenxuexin.com/css/highlight.css" />

    
    
</head>

<body>
    <div class="main animate__animated animate__fadeInDown">
        <div class="nav_container animated fadeInDown">
    <div class="site_nav" id="site_nav">
        <ul>
            
            <li>
                <a href="/">主页</a>
            </li>
            
            <li>
                <a href="/posts/">文章</a>
            </li>
            
            <li>
                <a href="/tags/">标签</a>
            </li>
            
            <li>
                <a href="/about/">关于</a>
            </li>
            
        </ul>
    </div>
    <div class="menu_icon">
        <a id="menu_icon"><i class="ri-menu-line"></i></a>
    </div>
</div>
        <div class="header animated fadeInDown">
    <div class="site_title_container">
        <div class="site_title">
            <h1>
                <a href="https://chenxuexin.com/">
                    <span>陈学新คิดถึง</span>
                </a>
            </h1>
        </div>
        <div class="description">
            <p class="sub_title">这是陈学新คิดถึง个人主页</p>
            <div class="my_socials">
                
                
                <a href="https://facebook.com/addio" title="facebook" target="_blank"><i class="ri-facebook-fill"></i></a>
                
                
                
                <a href="https://github.com/addio" title="github" target="_blank"><i class="ri-github-fill"></i></a>
                
                
                
                <a href="https://instagram.com/addio" title="instagram" target="_blank"><i class="ri-instagram-fill"></i></a>
                
                
                
                <a href="https://twitter.com/addio" title="twitter" target="_blank"><i class="ri-twitter-fill"></i></a>
                
                
                
                <a href="https://weibo.com/addio" title="weibo" target="_blank"><i class="ri-weibo-fill"></i></a>
                
                
                <a href="https://chenxuexin.com/index.xml" type="application/rss+xml" title="rss" target="_blank"><i
                        class="ri-rss-fill"></i></a>
            </div>
        </div>
    </div>
</div>
        <div class="content">
            <div class="post_page">
                <div class="post animate__animated animate__fadeInDown">
                    <div class="post_title post_detail_title">
                        <h2><a href='/posts/%E5%9C%A8-html-%E4%B8%AD%E5%BF%AB%E6%8D%B7%E8%BE%93%E5%85%A5%E6%A0%87%E7%AD%BE/'>在 HTML 中快捷输入标签</a></h2>
                        <span class="date">2020.11.25</span>
                    </div>
                    <div class="post_content markdown"><ol>
<li><code>!</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
		<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span> <span class="p">/&gt;</span>
		<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1.0&#34;</span> <span class="p">/&gt;</span>
		<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Document<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
		<span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;style.css&#34;</span> <span class="p">/&gt;</span>
	<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div><ol start="2">
<li>标签名<code>p</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</code></pre></div><ol start="3">
<li><code>span#app</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">span</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
</code></pre></div><ol start="4">
<li><code>div.app</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;app&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div><ol start="5">
<li><code>ul&gt;li*3</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</code></pre></div><ol start="6">
<li><code>ul.menu&gt;li*3&gt;a[href=#]</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;menu&#34;</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">herf</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">herf</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">herf</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</code></pre></div><ol start="7">
<li><code>ul&gt;li*5&gt;a[href=#]{我序号是$}</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;</span>我序号是1<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;</span>我序号是2<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;</span>我序号是3<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;</span>我序号是4<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;</span>我序号是5<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</code></pre></div><ol start="8">
<li><code>[img src=&quot;image/.jpg&quot; alt=&quot;new.jpg&quot;]*3</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">img</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;image/.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;new.jpg&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">img</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;image/.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;new.jpg&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">img</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;image/.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;new.jpg&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div><ol start="9">
<li><code>form:get</code> 或 <code>form:post</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">method</span><span class="o">=</span><span class="s">&#34;get&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
or
<span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">method</span><span class="o">=</span><span class="s">&#34;post&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
</code></pre></div><ol start="10">
<li><code>input：button</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="p">/&gt;</span>
</code></pre></div><ol start="11">
<li><code>a:link</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;http://&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</code></pre></div><ol start="12">
<li><code>link:css</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;style.css&#34;</span> <span class="p">/&gt;</span>
</code></pre></div><ol start="13">
<li><code>div.news1+div.news2</code> 加 <kbd>Tab</kbd></li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;news1&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;news2&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div></div>
                    <div class="post_footer">
                        
                        <div class="meta">
                            <div class="info">
                                <span class="field tags">
                                    <i class="ri-stack-line"></i>
                                    
                                    <a href="https://chenxuexin.com/tags/html/">HTML</a>
                                    
                                </span>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                
                <div class="doc_comments"></div>
                
            </div>
        </div>
    </div>
    <a id="back_to_top" href="#" class="back_to_top"><i class="ri-arrow-up-s-line"></i></a>
    
<footer class="footer">
	<div class="powered_by">
		<a href="https://github.com/varkai/hugo-theme-zozo">Designed by VarKai,</a>
		<a href="http://www.gohugo.io/">Proudly published with Hugo,</a>
		<a href="https://cloud.tencent.com/">Hosted in Tencent Cloud</a>
	</div>

	<div class="footer_slogan">
		
		<a href="https://beian.miit.gov.cn/"></a>
		<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35018202000227" style="
        display: inline-block;
        text-decoration: none;
        height: 20px;
        line-height: 20px;
      "><img src="/备案图标.png" style="float: left" />
			<p style="
          float: left;
          height: 20px;
          line-height: 20px;
          margin: 0px 0px 0px 5px;
          color: #939393;
          font-size: 11px;
        ">闽公网安备 35018202000227号 闽ICP备2020020925号-1</p>
		</a>
	</div>
</footer>
    <script src="https://chenxuexin.com/js/jquery-3.5.1.min.js"></script>
<link href="https://chenxuexin.com/css/fancybox.min.css" rel="stylesheet">
<script src="https://chenxuexin.com/js/fancybox.min.js"></script>
<script src="https://chenxuexin.com/js/zozo.js"></script>


<script type="text/javascript" async
    src="https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\[\[', '\]\]']],
                processEscapes: true,
                processEnvironments: true,
                skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
                TeX: {
                    equationNumbers: { autoNumber: "AMS" },
                    extensions: ["AMSmath.js", "AMSsymbols.js"]
                }
            }
        });

        MathJax.Hub.Queue(function () {
            
            
            
            var all = MathJax.Hub.getAllJax(), i;
            for (i = 0; i < all.length; i += 1) {
                all[i].SourceElement().parentNode.className += ' has-jax';
            }
        });
    </script>

<style>
    code.has-jax {
        font: inherit;
        font-size: 100%;
        background: inherit;
        border: inherit;
        color: #515151;
    }
</style>



</body>

</html>